<template>
    <div class="container">
        <div class="search">
            <u-search v-model="name" :clearabled="true" placeholder="请输入业务关键字" action-text="查找" @change="change" @search="change"></u-search>
        </div>
        <template v-if="!loading && searchList.length">
            <div class="card" v-for="item in searchList">
                <div class="item">
                    <div class="label">业务名称：</div>
                    <div class="value" style="font-weight: bold">{{item.name}}</div>
                </div>
                <div class="item">
                    <div class="label">部门名称：</div>
                    <div class="value">{{item.dept}}</div>
                </div>
                <div class="item">
                    <div class="label">事项类型：</div>
                    <div class="value">{{item.itemType}}</div>
                </div>
                <div class="item">
                    <div class="label">通办类型：</div>
                    <div class="value">{{item.overType}}</div>
                </div>
                <div class="item">
                    <div class="label">办理方式：</div>
                    <div class="value">{{item.transactWay}}</div>
                </div>
                <div class="item">
                    <div class="label">在线办理：</div>
                    <div class="value" :style="{color: item.isSupportOnline ? '#67C23A' : '#E6A23C'}">{{item.isSupportOnline ? '可在线办理' : '不可在线办理'}}</div>
                </div>
            </div>
        </template>
        <Empty v-if="!loading && !searchList.length"></Empty>
    </div>
</template>
<script>
import Empty from "../components/Empty.vue";
import { getInventoryAPI } from "../api/trans_pro";

export default {
    components: { Empty },
    data() {
        return {
            loading: false,
            list: [],
            searchList: [],
            name: "", // 部门名称
        };
    },
    onShareAppMessage() {},
    onLoad(options) {
        let { id, title } = options;
        if (title) wx.setNavigationBarTitle({ title });

        this.loading = true;
        wx.showLoading({
            title: "加载中...",
        });
        getInventoryAPI({ id }).then((res) => {
            this.list = [...res.data];
            this.searchList = [...res.data];
            wx.hideLoading();
            this.loading = false;
        });
    },
    methods: {
        change(value) {
            console.log(value);
            this.searchList = this.list.filter((item) => {
                return item.name.indexOf(value) !== -1;
            });
        },
    },
};
</script>
<style scoped lang="scss">
@import "../assets/scss/common.scss";

.container {
    min-height: 100vh;
    background-color: #fafafa;
    box-sizing: border-box;
    padding-top: 70px;
    .search {
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        padding: 10px 15px;
        background-color: #fff;
        margin-bottom: 15px;
        box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1) !important;
        box-sizing: border-box;
    }
    .card {
        padding: 15px;
        border-radius: 8px;
        background-color: #fff;
        margin: 0 15px 15px;
        box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1) !important;
        .item {
            display: flex;
            line-height: 24px;
            margin-bottom: 8px;
            &:last-child {
                margin: 0;
            }
            .label {
                flex: none;
                color: #0c3b96;
            }
            .value {
            }
        }
    }
}
</style>